﻿(function($) {
	var cityBase;
	$.fn.citySelectPlug = function(options) {
		cityBase = new CitySelectPlugBase(this, options);
		if (cityBase.option.ajaxUrl == '')
			throw 'ajaxURL没有设置';
		return cityBase.start();
	}

	//因为插件外面需要访问这个方法，所以必须暴露出去。
	$.fn.citySelectPlug.citySelected = function(selectid, name, type, nextType) {
		cityBase.citySelected(selectid, name, type, nextType);
	}


	//定义一个类，所有的变量都在类的内部。
	var CitySelectPlugBase = function(ele, opt) {
		this.$element = ele,
		this.defaults = {
			'ajaxUrl': '',
		},
		this.option = $.extend({}, this.defaults, opt)
	};


	CitySelectPlugBase.prototype = {
		//定义一个枚举，省市区
		typeEnum: { Province: { name: "Province", next: "City" }, City: { name: "City", next: "District" }, District: { name: "District", next: "" } },

		//开始函数
		start: function() {
			var _this = this;
			_this.$element.after(this.htmlDiv);
		
			var winHeight = $(window).height(); //获取当前页面高度
			$(window).resize(function() {
				var thisHeight = $(this).height();
				if (winHeight - thisHeight > 50) {
					//当软键盘弹出，在这里面操作

				} else {
					//当软键盘收起，在此处操作
					$(".citySelectDiv").height($(window).height());
					$(".selectDiv").height($(window).height() - 60 - 35);
				}
			});


			_this.$element.click(function() {
				setTimeout(function() {
					$(".zhezhao").show();
					//修正ios虚拟键盘弹出时输入框在中间的问题
					$('html,body').animate({scrollTop:0},5);
					$(".citySelectDiv").height($(window).height());
					$(".selectDiv").height($(window).height() - 60 - 35+10);
				}, 100);
			
			});
			$(".selectedHead li").click(function() {
				_this.headClick(this);
			});
				_this.ajaxGetCity(0, _this.typeEnum.Province);
			return this.$element;
		},

		//ajax获取城市
		ajaxGetCity: function(selectid, selectType) {
			var _this = this;
			$(".selectDiv").each(function() {
				$(this).removeClass("act"); //列表全部隐藏
			});
			$("#" + selectType.name + "Head").addClass("act"); //头部显示
			$("#" + selectType.name + "SelectUL").addClass("act"); //列表显示
			$.get(_this.option.ajaxUrl, { id: selectid }, function(data) {
				var dataObj = eval("(" + data + ")"); //转换为json对象 
				var cityHtml = "";
				for (var i = 0; i < dataObj.length; i++) {
					//dataObj[i].Name  dataObj[i].ID
					cityHtml += ("<li onclick='$.fn.citySelectPlug.citySelected(" + dataObj[i].ID + ",\"" + dataObj[i].Name + "\",\"" + selectType.name + "\",\"" + selectType.next + "\")' >" + dataObj[i].Name + "</li>");
				}
				//ProvinceSelectUL
				var selectUl = $("#" + selectType.name + "SelectUL");
				if (selectUl.length == 0)
					throw '没有找到对应的层';
				selectUl.html(cityHtml);
			});
		},

		//城市被选中后的调用，需要暴露给外面
		citySelected: function(selectid, name, type, nextType) {
			var _this = this;
			if (type == _this.typeEnum.District.name) {
				//区选择完成，就关闭整个层
				$("#citySelect").val($("#ProvinceHead").html()+ " " + $("#CityHead").html()+ " " + name);
				$(".zhezhao").hide();
			}

			$("#hide" + type).val(selectid); //显示列表供选择
			$("#" + type + "Head").html(name); //顶部已选的名字
			$("#" + nextType + "Head").html("请选择"); //顶部请选择
			switch (nextType) {
			case "Province":
				_this.ajaxGetCity(selectid, this.typeEnum.Province);
				break;
			case "City":
				_this.ajaxGetCity(selectid, this.typeEnum.City);
				break;
			case "District":
				_this.ajaxGetCity(selectid, this.typeEnum.District);
				break;
			}

		},

		//头部被点击，选到市的时候可以回头重新选省
		headClick: function(obj) {
			var _this = this;
			var selectType = $(obj).attr('id');
			var selectid = 0;
			switch (selectType) {
			case "ProvinceHead":
				$("#DistrictHead").removeClass("act");
				$("#CityHead").removeClass("act");
				_this.ajaxGetCity(0, this.typeEnum.Province);
				break;
			case "CityHead":
				$("#DistrictHead").removeClass("act");
				selectid = $("#hideProvince").val();
				_this.ajaxGetCity(selectid, this.typeEnum.City);
				break;
			case "DistrictHead":
				selectid = $("#hideCity").val();
				_this.ajaxGetCity(selectid, this.typeEnum.District);
				break;
			}
		},

		//html
		htmlDiv: '<input id="hideProvince" name="hideProvince" type="hidden" value=""/><input id="hideCity" name="hideCity" type="hidden" value=""/><input id="hideDistrict" name="hideDistrict" type="hidden" value=""/><div class="zhezhao"><div class="citySelectDiv"><div class="cityHeader">所在地区<div class="close" onclick="$(\'.zhezhao\').hide()">X</div></div><ul class="selectedHead clearfix"><li id="ProvinceHead" class="act">请选择</li><li id="CityHead"></li><li id="DistrictHead"></li></ul><ul id="ProvinceSelectUL" class="selectDiv act"></ul><ul id="CitySelectUL" class="selectDiv"></ul><ul id="DistrictSelectUL" class="selectDiv"></ul></div></div>',
	};
})(jQuery);




